<template>
  <div class="container" :class="finish ? 'finish' : 'waitting'">
    <div class="head-bar">
        <div class="font-13 pad-t-14">
            <span>订单状态：</span>
            <span class="font-w font-yellow" v-if="resData.orderStatus === 4">已完成</span>
            <span class="font-w" v-else-if="resData.orderStatus === 1">待取货</span>
            <span class="font-w" v-else-if="resData.orderStatus === 3">已收货</span>
        </div>
        <div v-if="memberStore.businessHour" class="font-13 mar-t-9">
            <span>营业时间：</span><span class="font-w">{{memberStore.businessHour}}</span>
        </div>
        <div class="font-w mar-t-6">
            <span class="font-14">{{memberStore.storeAddress}}</span>
            <button class="font-11 copy-btn mar-l-5"  @click="$pt.setClipboardData({data: memberStore.storeAddress})">复制</button>
        </div>
        <div class="mar-t-16 seek-box">
            <button class="font-14" @click="openLocation">
                <img class="width-12 height-15" v-if="finish && fileSpace" :src="fileSpace + '/images/finish-address.png'" alt="">
                <img class="width-12 height-15" v-if="!finish && fileSpace" :src="fileSpace + '/images/waitting-address.png'" alt="">
                <span class="mar-l-8">门店导航</span>
            </button>
            <!-- 分割线 -- 竖 -->
            <div class="dividing-line"></div>
            <button class="font-14" @click="$pt.makePhoneCall({phoneNumber: memberStore.storePhone})">
                <img class="width-15 height-15" v-if="finish && fileSpace" :src="fileSpace + '/images/finish-phone.png'" alt="">
                <img class="width-15 height-15" v-if="!finish && fileSpace" :src="fileSpace + '/images/waitting-phone.png'" alt="">
                <span class="mar-l-8">联系门店</span>
            </button>
        </div>
    </div>
    <!-- 横条 -->
    <div class="stripe"></div>
    <div class="main-bar">
        <div class="main-head" v-if="finish">
            <div class="pickup text-align-c font-18 font-w">您已取货</div>
            <div class="font-12 font-color-6 mar-t-10 text-align-c">如有疑问可联系商家或客服</div>
        </div>
        <div class="main-head" v-else>
            <div class="flex flex-center pad-t-29 height-150">
                <img v-if="verifyCode" class="width-150 height-150" :src="verifyCode" alt="">
            </div>
            <div class="font-15 font-color mar-t-6 text-align-c">取货码</div>
        </div>
        <div class="order-content pad-b-13">
            <div class="order-row-box" v-for="(item,index) in resData.orderGoodsList" :key="index">
                <div class="order-row flex flex-between">
                    <div class="img-box">
                        <img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt="" class="width-80 height-80">
                    </div>
                    <div class="width-205 shop-content height-80">
                        <div class="line-2 font-13 font-color">
                            {{item.goodsTitle}}
                        </div>
                        <div class="line-1 font-color-9 select-content font-12">{{item.skuDetail}}</div>
                        <div class="flex flex-between font-color">
                            <span class="font-13 font-w">￥{{item.goodsPrice}}</span>
                            <span class="font-11">×{{item.goodsNum}}件</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="font-13 font-color mar-t-13">
                <span>订单编号：</span>
                <span>{{resData.orderNo}}</span>
            </div>
            <div class="font-13 font-color mar-t-8">
                <span>下单时间：</span>
                <span>{{resData.createTime}}</span>
            </div>
            <div class="font-13 font-color mar-t-8">
                <span>支付时间：</span>
                <span>{{resData.payTime}}</span>
            </div>
            <div class="font-13 font-color mar-t-8" v-if="finish">
                <span>核销时间：</span>
                <span>{{resData.receivedTime}}</span>
            </div>
            <div class="font-13 font-color mar-t-8" v-if="finish">
                <span>核销员：</span>
                <span>{{resData.verifierNickname}}</span>
            </div>
        </div>
        <div class="flex flex-between font-13 font-color mar-t-10">
            <div>商品小计</div>
            <div class="font-color-9">￥{{resData.goodsTotalPrice}}</div>
        </div>
        <div class="font-13 font-color mar-t-15 text-align-r">
            <span>实付金额：<span>￥</span></span>
            <span class="font-w font-18">{{resData.goodsTotalPrice}}</span>
        </div>
        <div class="mar-t-15 font-14 font-w mark-content">
            备注：{{resData.customerComment}}
        </div>
    </div>
    <div class="foot-bar font-color-9 font-12 text-align-c pad-b-15" @click="$pt.makePhoneCall({phoneNumber: memberStore.storePhone})">
        客服电话：{{memberStore.storePhone}}
    </div>
  </div>
</template>
<script>
import { getOrder } from '@/api/shop'
export default {
  data() {
    return {
      finish: false, // 判断订单是否完成
      resData: [],
      memberStore: {},
      timeOver: null,
      verifyCode: ''
    }
  },
  onUnload() {
    clearInterval(this.timeOver)
    this.timeOver = null
  },
  onShow() {
    this.$pt.removeStorageSync('chooseLocation')
  },
  mounted() {
    this.orderId = this.getCurrentPage().query.orderId
    this.getOrderDetails()
    // 定时调用  判断是否被扫码成功
    this.timeOver = setInterval(() => {
      this.getOrderDetails()
    }, 1000)
  },
  methods: {
    getOrderDetails() {
      getOrder(this.orderId).then((response) => {
        if (response.isError) return
        if (response.data.orderStatus === 1) {
          this.finish = false
        } else if (response.data.orderStatus === 3 || response.data.orderStatus === 4) {
          this.finish = true
        }
        this.resData = response.data
        this.memberStore = response.data.memberStore
        this.verifyCode = this.resData.verifyCode
        setTimeout(() => {
          this.verifyCode = this.resData.verifyCode
        }, 1000)
      }).catch(() => {
      })
    },
    openLocation() {
    // 获取位置
      if (!this.memberStore.latitude || !this.memberStore.longitude) {
        return
      }
      this.$pt.setStorageSync('chooseLocation', true)
      this.$pt.openLocation({
        latitude: Number(this.memberStore.latitude),
        longitude: Number(this.memberStore.longitude),
        address: this.memberStore.storeAddress
      })
    }
  },
  watch: {
    finish: function() {
      clearInterval(this.timeOver)
      this.timeOver = null
    }
  }
}
</script>
<style lang="less" scoped>
.head-bar {
    height: 216px;
    padding: 0 22px 0px 22px;
    .copy-btn{
        display: inline-block;
        padding: 0px 8px;
        background: unset;
        line-height: unset;
        border-radius: 25px;
        vertical-align: bottom;
    }
    .seek-box{
        display: flex;
        justify-content: center;
        align-items: center;
        .dividing-line{
            width: 1px;
            height: 19px;
            // margin: 0 35px;
        }
        button{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px 25px 5px 13px;
            border-radius: 25px;
            line-height: unset;
        }
    }
}
.stripe{
    margin: 0 10px;
    border-radius: 10px;
    height: 10px;
    margin-top: -37px;
}
.main-bar{
    margin: 0 22px 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-x: 50%;
    margin-top: -7px;
    padding: 0 15px 50px;
    .main-head{
        border-bottom: 1px dotted #d6d6d6;
    }
    .order-content{
        border-bottom: 1px dotted #ededed;
        .order-row-box{
            .order-row{
                padding: 11px 0 15px;
                border-bottom: 1px dotted #ededed;
                .img-box{
                    // background: yellow;
                }
                .shop-content{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .select-content{
                    background: #f2f2f2;
                    padding-left: 5px;
                    margin: 5px 0;
                }
            }
        }
        .line-1 {
            line-height: unset;
            height: unset;
        }
    
    } 
}
// 待取货
.waitting{
    .head-bar{
        background: #f8c400;
        color: #333;
        .copy-btn{
            color: #333;
            border: 1px solid #333;
        }
        .seek-box{
            color: white;
            .dividing-line{
                background: #333;
            }
            button{
                background: #333;
                color: white;
            }
        }
    }
    .stripe{
        background: #df9f04;
    }
    .main-bar{
        background-image: url('https://veekrayimg.joinsun.vip/images/order-details-waitting-2.png');
        .main-head{
            height: 219px;
        }
    }
}
// 完成订单
.finish{
    .head-bar{
        background: #24ba73;
        color: white;
        .copy-btn{
            color: white;
            border: 1px solid white;
        }
        .seek-box{
            color: #333;
            .dividing-line{
                background: white;
            }
            button{
                background: white;
                color: #333;
                &::after{
                    border: unset;
                }
            }
        }
    }
    .stripe{
        background: #108c5a;
    }
    .main-bar{
        background-image: url('https://veekrayimg.joinsun.vip/images/order-details-finish-2.png');
        .main-head{
            height: 150px;
            .pickup{
                padding-top: 55px;
            }
        }
    }
}
</style>
